<template>
  <div>
    <!--    <meta name="referrer" content="no-referrer">-->
    <a-modal
      title="查看详情"
      :width="600"
      :visible="visible"
      @cancel="handleCancel"
    >
      <template #footer>
        <a-button key="back" @click="handleCancel">确认</a-button>
      </template>
      <a-spin :spinning="confirmLoading">
        <div>
          <img style="margin-left: 10%; width: 80%; height: 60%" :src="imgUrl" >
        </div><br>

        <span style="font-weight:bold">商品描述:</span><span style="margin-left: 5%; white-space: pre-wrap">{{ goods.goodsDesc}}</span>
      </a-spin>
    </a-modal>
  </div>

</template>

<script>
export default {
  name: 'ShowInfo',
  data () {
    return {
      visible: false,
      goods: {},
      imgUrl: '',
      desc: '',
      confirmLoading: false,

      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      }
    }
  },
  methods: {
    showInfo (record) {
      console.log(record)
      this.visible = true
      this.goods = record
      this.imgUrl = record.photoUrl
      this.desc = record.goodsDesc
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>
